<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>按钮控制div显示和隐藏（动画）</title>
    <style>
        .my-transition {
            margin-top: 200px;
            width: 100px;
            height: 100px;
            background: yellow;
            transform: scale(0.5, 0.5);
            opacity: 0;
            /*
                    transition-property: width;
                    transition-duration: 2s;
                    transition-timing-function: linear;
                    transition-delay: 1s;
                    */
            transition: transform 0.5s linear, opacity 0.5s linear;
        }

        .my-click-transiton {
            opacity: 1;
            transform: scale(1, 1);
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>

<body>
<input type="button" id="mybutton" value="click">
<div class="my-transition"></div>
<script>
    //用js触发CSS3-transition过渡动画
    $('#mybutton').click(function () {
        var myTransition = $('.my-transition');
        if (myTransition.hasClass('my-click-transiton')) {
            myTransition.removeClass('my-click-transiton')
        } else {
            $('.my-transition').addClass('my-click-transiton');
        }
    });
</script>
</body>

</html>